<template>
<div>
    <ul  class="nav-box">
  <li >
    <img src="../assets/超市png.png">
    <p class="title">嗨购超市</p>
  </li>
  <li >
    <img src="../assets/3c.png">
    <p class="title">数码电器</p>
  </li>
  <li >
    <img src="../assets/服饰.png">
    <p class="title">嗨购服饰</p>
  </li>
  <li >
    <img src="../assets/嗨购生鲜.png">
    <p class="title">嗨购生鲜</p>
  </li>
  <li >
    <img src="../assets/京东到家.png">
    <p class="title">嗨购到家</p>
  </li>
  <li >
    <img src="../assets/充值缴费.png">
    <p class="title">充值缴费</p>
  </li>
  <li >
    <img src="../assets/牛牛.png">
    <p class="title">9.9砍价</p>
  </li>
  <li >
    <img src="../assets/券.png">
    <p class="title">领券</p>
  </li>
  <li >
    <img src="../assets/领京铁.png">
    <p class="title">领金贴</p>
  </li>
  <li >
  <img src="../assets/plus会员.png">    
 <p class="title">PLUS会员</p>
  </li>
 
  
  
  </ul>
</div>
</template>

<script>
export default {
    name:"nav-vue"
}
</script>
 
<style scoped>

.nav-box{
    width: 100%;
    height: 6.5rem;
    /* background-color: green; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
}
li{
box-sizing: border-box;
  width:17%;
  height: 50px;
  margin-bottom: .4rem;
  text-align: center;
  
}
li img{
  width: 2rem;
  height: 2rem;
}
.title{
    font-size: .6rem;
    color: gray;
}
</style>